import { reactive, onMounted, defineComponent, toRefs, getCurrentInstance, nextTick } from 'vue'
import ZlrtSearch from '@/components/zlrt-search/search.vue'
import menuApi from '@/api/system/menu-api'
import ZlrtTable from '@/components/zlrt-table/table.vue'
import TableContext from '@/components/zlrt-table/table-context'
import * as _ from 'lodash';
export default defineComponent({
  components: {
    ZlrtTable,
    ZlrtSearch
  },
  setup() {
    const menuTypeOptions = [
      { label: '目录', value: 'M' },
      { label: '菜单', value: 'C' },
      { label: '按钮', value: 'F' }
    ]

    const sysTypeOptions = [
      { label: '管理平台', value: '0' },
      { label: '移动端', value: '1' }
    ]

    const disabledOptions = [
      { label: '正常', value: false },
      { label: '停用', value: true }
    ]

    const ctx = reactive(new TableContext(getCurrentInstance(), {
      title: '菜单',
      api: menuApi,
      pageSize: 0,
      maxHeight: 'calc(100vh - 280px)',
      columns: [

        { prop: 'menuName', label: '菜单名称', valueType: 'input', className: 'first-cell', width: '250px' },
        { prop: 'menuType', label: '菜单类型', slot: true, valueType: 'select', options: menuTypeOptions },
        { prop: 'sysType', label: '所属系统', slot: true },
        { prop: 'icon', label: '图标' },
        { prop: 'disabled', label: '状态', slot: true, valueType: 'select', options: disabledOptions },
        { prop: 'operation', label: '操作', slot: true, width: '200px' }
      ],
      loadData: async () => {
        ctx.loading = true
        ctx.listApi = ((param) => ctx.api.list(param))
        ctx.processFilter()
        const res = await ctx.listApi({
          current: 1,
          size: 5000,
          filter: ctx.filter,
          otherFilter: ctx.otherFilter,
        })
        ctx.data = res.data?.records || []
        ctx.data = treeBuild(ctx.data);
        ctx.total = res.data?.total || 0
        ctx.loading = false
      },
      // 编辑按钮
      showEdit: async (row?, parent?) => {
        row = row || {}
        ctx.editData = { ...row }
        if (parent) {
          ctx.editData.parentId = parent.id;
          ctx.editData.parentName = parent.menuName;
        }
        ctx.editVisible = true
        const that = ctx
        if (row.id) {
          ctx.editLoading = true
          ctx.detailApi = ctx.detailApi || ((id) => ctx.api.detail(id))
          const res = await ctx.detailApi(row.id)
          if (res.success) {
            row = res.data || {}
            that.editData = { ...row }
          }
          ctx.editLoading = false
        }
        nextTick(() => {
          that.formRef?.clearValidate()

          nextTick(() => {
            that.formRef?.clearValidate()
            nextTick(() => {
              that.formRef?.clearValidate()
            })
          })
        })
      },
      other: {
        getTypeName: (val, options) => {
          if (!val && val != false) {
            return '-'
          }
          return options.find(item => {
            return item.value === val
          }).label
        },
        props: {
          label: 'menuName',
          children: 'children'
        }
      },

    }))

    const treeBuild: any = (data, parent) => {
      if (!data) {
        return;
      }
      parent = parent ?? data.filter(o => !data.some(x => x.id == o.parentId));
      parent?.forEach(item => {
        item.children = _.sortBy(data.filter(o => o.parentId == item.id), "sort");
        treeBuild(data, item.children);
      });
      return parent;
    }

    const data = reactive({
      ctx,
      menuTypeOptions,
      sysTypeOptions,
      disabledOptions
    })

    onMounted(() => {
      ctx.loadData()
    })

    return {
      ...toRefs(data)
    }
  }
})
